<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button onclick="notifyMe()">Notify me!</button>
<button onclick="notifyThreed()">延迟三秒</button>
<button onclick="cancel()">取消</button>
<script>

    window.MessageString = 'body字符串'

    function notifyThreed(){


        document.addEventListener("visibilitychange", function() {
            if(document.visibilityState ==='hidden'){ //说明页面被最小化或者打开的不是当前页面
                window.MessageString = '快点回来吧'
            }
            else {
                window.MessageString = '欢迎回来'
            }
        })

        console.log(MessageString);

        // setTimeout(notifyMe,3000);
        window.id = setInterval(notifyMe,10000)


    }
    function cancel(){
        clearInterval(id)
    }



    function notifyMe(){
        const notification = window.Notification || window.mozNotification || window.webkitNotification
        if (notification) {
            // 可以通过使用箭头函数变更this指向
            notification.requestPermission(result => {
                console.log(result) // granted（允许） || denied（拒绝）
                if ('denied' === result) {
                    console.warn('请授权浏览器通知!')
                } else {
                    const tag = 'tag' + new Date().getTime()
                    // let notification = new Notification(title, options)
                    // https://developer.mozilla.org/zh-CN/docs/Web/API/notification
                    const notify = new notification(
                        '测试标题', // title标题
                        {
                            // actions?: NotificationAction[];
                            badge: "./favicon.jpg",
                            // body?: string;
                            // data?: any;
                            // dir?: NotificationDirection;
                            // icon?: string;
                            image: "./favicon.jpg",
                            // lang?: string;
                            // renotify?: boolean;
                            // requireInteraction: true,
                            // silent?: boolean;
                            // tag?: string;
                            // timestamp?: number;
                            // vibrate?: VibratePattern;
                            dir: 'auto', // 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
                            lang: 'zh-CN', // 指定通知中所使用的语言
                            body: MessageString, // 通知中额外显示的字符串
                            tag: tag,  // 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除
                            icon: './favicon1.ico' // 将被用于显示通知的图标,可使用import引入，也可以填写图标存放路径
                        })
                    notify.onclick = () => {
                        console.info('click methods');
                        window.open('http://www.baidu.com');
                    }
                    notify.onerror = () => {
                        console.error('error methods')
                    }
                    notify.onshow = () => {
                        console.log('show methods')
                        console.log(notify.maxActions)
                    }
                    notify.onclose = () => {
                        console.info('close methods')
                    }
                }
            })
        } else {
            alert('浏览器不支持通知!');
            console.warn('浏览器不支持通知!');

        }
    }

</script>
</body>
</html>